<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>教育展示-详情</title>
    <link rel="stylesheet" href="/static/common/css/reset.css">
    <!-- <link rel="stylesheet" href="/static/common/css/swiper_2.7.css"> -->
    <link rel="stylesheet" href="/static/common/css/header.css">
    <link rel="stylesheet" href="/static/common/css/footer.css">
    <link rel="stylesheet" href="/static/css/exhibition/detail_exhibition-warningcase.css">
    <link rel="stylesheet" href="/static/common/css/common.css">
    <link rel="stylesheet" href="../static/common/css/swiper_3.3min.css">
    <link rel="stylesheet" href="../static/common/css/footer.css">

</head>

<body>
    <!-- 头部部分 -->
    <div id="header"></div>
    <!-- 内容区域 -->
    <div class="dh-main">
        <div class="exhibition-banner"></div>
        <div class="main-content">
            <div class="main-left">
                <div class="dh-top1">
                    <p class="h-top">教育展示</p>
                </div>
                <ul class="dh-list">
                    <li> <a href="page_exhibition-video.html">投教视频 </a></li>
                    <li> <a href="list_exhibition-design.html">创意设计 </a></li>
                    <li> <a href="list_exhibition-magazine.html">电子杂志 </a></li>
                    <li> <a href="list_exhibition-warningcase.html">风险警示与案例</a></li>
                </ul>
            </div>
            <div class="main-right">
                <div class="right-txt-box">
                    <h1>创意设计</h1>
                    <div class="wz">
                        <span class="wz-spans">您的位置：<a href="">首页</a> > <a href="">教育展示</a> ><a href="">创意设计</a> </span>
                    </div>
                </div>
                <!-- 右侧的内容 -->
                <div class="box-txt">

                    <div class="ideaDetails clear">
                        <div class="clear ideaTitle">
                            <span class="fl">证券投资者手册</span>
                        </div>
                        <p class="ideaFrom">
                            <span>2018/07/02 15:39:06</span>
                            <span></span>
                        </p>
                        <div class="Picture_album">
                            <div class="swiper-container gallery-top swiper-container-horizontal">
                                <div class="swiper-wrapper swiper-wrapper-bigimg" id="BigImg">
                                    <!-- 轮播内容 -->
                                    <div class="swiper-slide swiper-sy">
                                        <div class="BigImg">
                                            <img src="../static/images/details_img/banner1.png">
                                        </div>
                                        <p class="box-p">
                                            债券投资是一门技术活，投资者需要具备相当的专业能力。除详细了解募集说明书等文件内容和协议条款外，还要了解债券市场的交易规则，价格形成机制，产品期限结构，影响收益率的因素等。
                                            高风险特征的债券，仅限合格投资者买入。低等级、高收益的信用债往往意味着更高的违约风险。</p>
                                    </div>
                                    <div class="swiper-slide swiper-sy">
                                        <div class="BigImg">
                                            <img src="../static/images/details_img/banner1.png">
                                        </div>
                                        <p class="box-p">
                                            债券投资是一门技术活，投资者需要具备相当的专业能力。除详细了解募集说明书等文件内容和协议条款外，还要了解债券市场的交易规则，价格形成机制，产品期限结构，影响收益率的因素等。
                                            高风险特征的债券，仅限合格投资者买入。低等级、高收益的信用债往往意味着更高的违约风险。</p>
                                    </div>
                                    <div class="swiper-slide swiper-sy">
                                        <div class="BigImg">
                                            <img src="../static/images/details_img/banner1.png">
                                        </div>
                                        <p class="box-p">
                                            债券投资是一门技术活，投资者需要具备相当的专业能力。除详细了解募集说明书等文件内容和协议条款外，还要了解债券市场的交易规则，价格形成机制，产品期限结构，影响收益率的因素等。
                                            高风险特征的债券，仅限合格投资者买入。低等级、高收益的信用债往往意味着更高的违约风险。</p>
                                    </div>


                                </div>
                                <span class="Picture_albumNum">
                                    <i>1</i>/<i>3</i>
                                </span>
                            </div>
                            <!-- 控制按钮 -->
                            <div class="swiper-button-next">
                                <img src="../static//images/exhibition-video/btn_right.png" alt="">
                            </div>
                            <div class="swiper-button-prev swiper-button-disabled">
                                <img src="../static//images/exhibition-video/btn_left.png" alt="">
                            </div>

                            <div class="swiper-container gallery-thumbs swiper-container-horizontal">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" ">
                                <img src=" ../static/images/details_img/banner_btn.png"> </div>
                                    <div class="swiper-slide" ">
                                <img src=" ../static/images/details_img/banner_btn.png"> </div>
                                    <div class="swiper-slide"">
                                <img src=" ../static/images/details_img/banner_btn.png"> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--放一个id为footer的div,把footer.html加载到这块-->
    <footer>
        <div class="footers">
            <div class="main-footers">
                <!-- 轮播图 -->
                <div class="swiper-banner" id="friendship">
                    <div class="swiper-container swiper-footer">
                        <div class="swiper-wrapper footers-banner-img">
                            <div class="swiper-slide">
                                <a href="http://www.csrc.gov.cn/pub/newsite/">
                                    <img src="../static/images/footers_img/banner1.png">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="http://www.sac.net.cn/" target="_blank">
                                    <img src="../static/images/footers_img/banner2.png">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="http://www.sse.com.cn/" target="_blank">
                                    <img src="../static/images/footers_img/banner3.png">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="http://www.szse.cn/" target="_blank">
                                    <img src="../static/images/footers_img/banner4.png">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="http://www.neeq.com.cn/" target="_blank">
                                    <img src="../static/images/footers_img/banner5.png">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="http://www.chinaclear.cn/" target="_blank">
                                    <img src="../static/images/footers_img/banner6.png">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="http://www.sipf.com.cn/" target="_blank">
                                    <img src="../static/images/footers_img/banner7.png">
                                </a>
                            </div>
                            <div class="swiper-slide">
                                <a href="https://www.investor.org.cn" target="_blank">
                                    <img src="../static/images/footers_img/banner8.png">
                                </a>
                            </div>
                        </div>
                    </div>
                    <p></p>
                    <div id="btns1" class="swiper-button-next"><img src="../static//images/footer/btn_right.png" alt="">
                    </div>
                    <div id="btns2" class="swiper-button-prev"><img src="../static//images/footer/btn_left.png" alt="">
                    </div>
                </div>

            </div>

            <div class="box-footer">
                <div class="box-main-footer">
                    <div class="left-txt">
                        <!-- <p>累加访问量:<span>19,502,812</span>次</p> -->
                        <p><img src="../static/images/footer/icon1.png" alt=""> <span>95531 / 400 8888 588</span></p>
                        <!-- <p><img src="../static//images/footer/icon2.png" alt=""> <span>service@longone.com</span></p>
                                                            <p><img src="../static//images/footer/icon3.png" alt=""> <span>021-50588876</span></p> -->
                    </div>
                    <ul class="ewm">
                        <li><img src="../static/images/footer/er1.png" width="114" height="114" alt="">
                            <p>东海随身行</p>
                        </li>
                        <li><img src="../static/images/footer/er2.png" width="114" height="114" alt="">
                            <p>微信服务号</p>
                        </li>
                        <li><img src="../static/images/footer/er3.jpg" width="114" height="114" alt="">
                            <p>微信订阅号</p>
                        </li>
                    </ul>
                    <!-- <div class="right-txt">
                                                            <span>关注我们</span>
                                                            <img src="../static//images/footer/wx.png" alt="">
                                                        </div> -->
                </div>
                <div class="box-bottom">
                    <div class="box-bottom-content">
                        <p class="left-p">版权声明 中国证监会投资者保护热线：12386</p>
                        <div class="right-p">
                            <div class="d2">
                                <a target="_blank"
                                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32040202000232"
                                    style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img
                                        src="../static/images/footer/beian.png" style="float:left;">苏公网安备
                                    32040202000232号</a> <a
                                    href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action">苏ICP备05003634号</a>
                                <!-- <span id="cnzz_stat_icon_1256281249"><a href="https://www.cnzz.com/stat/website.php?web_id=1256281249" target="_blank" title="站长统计"><img class="imgs-icon" border="0" hspace="0" vspace="0" src="http://icon.cnzz.com/img/pic1.gif"></a></span> -->
                            </div>
                            </dv>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </footer>
    <!-- 底部部分 -->
</body>
<script src="/static/common/js/jquery-1.11.3.js"></script>
<!-- 加载头尾 -->
<script src="/static/common/js/load.js"></script>
<!-- <script src="/static/common/js/swiper_2.7.js"></script> -->
<script src="../static/common/js/swiper_3.3min.js"></script>
<script>

    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.Picture_album .swiper-button-next',
        prevButton: '.Picture_album .swiper-button-prev',
        spaceBetween: 4,
        observer: true,
        onSlideChangeEnd: function (swiper) {
            // 序号
            $(".Picture_albumNum i:nth-child(1)").html($(".gallery-top .swiper-slide-active").index() + 1);
            $(".Picture_albumNum i:nth-child(2)").html($(".gallery-top .swiper-slide").length);
        }
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 4,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        onSlideChangeEnd: function (swiper) {
            // 序号
            $(".Picture_albumNum i:nth-child(1)").html($(".gallery-top .swiper-slide-active").index() + 1);
            $(".Picture_albumNum i:nth-child(2)").html($(".gallery-top .swiper-slide").length);
        }
    });

    var mySwiperd = $('.swiper-footer').swiper({
        nextButton: '#friendship .swiper-button-next',
        prevButton: '#friendship .swiper-button-prev',
        paginationClickable: true,
        slidesPerView: 4,
        spaceBetween: 0,
    });

    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;

    var imgBox = document.getElementById("BigImg");
    var BigImg = imgBox.getElementsByClassName("swiper-slide");



    var cookiestr = document.cookie.slice(4)
    var cookieTxt = cookiestr.split('=')[0].split(';')[0]
    //  h1标签赋值
    $('.right-txt-box>h1')[0].innerText = cookieTxt
    $('.dh-list>li>a').each(function (v, m) {
        //  根据cookie 循环判断添加active效果
        if (this.innerText == cookieTxt) {
            $(this).addClass('dh-acitve')
        }
    })
</script>

</html>